<template>
  <el-card class="box-card">
    <div class="rights-container">
      <!-- 新增角色 -->
      <div class="add-role">
        <el-button type="primary" size="medium" @click="addRole">新增角色</el-button>
      </div>

      <!-- 列表 -->
      <div class="right-list">
        <el-table :data="$store.state.roleRightList" border style="width: 100%">
          <el-table-column type="index" label="序号" width="80px" />
          <el-table-column prop="title" label="角色名称" width="150px" />
          <el-table-column prop="" label="权限">
            <template slot-scope="props">
              <rights-item v-if="flag" :rowId="props.row.id" :menuList="subMenuList" />
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180">
            <template v-slot="slotProps">
              <a href="javascript:;" @click="editRole(slotProps.row)">权限配置</a>
              <a href="javascript:;" @click="deleteRole(slotProps.row)">删除</a>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 添加角色 -->
      <role-add :visible.sync="addDialogVisible" :menuList="subMenuList" @success="$store.dispatch('loaderRightList')" />
      <!-- 编辑角色 -->
      <role-edit :role="role" :visible.sync="editDialogVisible" :menuList="subMenuList" @success="editSuccess" :flag="flag" />
    </div>
  </el-card>
</template>

<script>
import RoleAdd from './components/RoleAdd.vue'
import RoleEdit from './components/RoleEdit'
import RightsItem from './components/RightsItem'
import { getMenuList } from '@/assets/api/user/menu.js'
import { deleteRoleRight } from '@/assets/api/user/roleRight.js'

export default {
  name: 'RoleRight',
  components: {
    'role-add': RoleAdd,
    'role-edit': RoleEdit,
    'rights-item': RightsItem
  },
  created () {
    // 加载角色权限列表
    this.$store.dispatch('loaderRightList')
    // 加载菜单列表
    this.loaderMenuList()
  },
  data () {
    return {
      // 添加角色权限对话框
      addDialogVisible: false,
      // 编辑角色权限对话框
      editDialogVisible: false,
      // 菜单列表
      // menuList: [],
      subMenuList: [],
      // 当前角色信息
      role: {},
      checkedNode: [],
      // 编辑后的数组
      editChecked: [],
      flag: true
    }
  },
  methods: {
    // 加载菜单列表
    async loaderMenuList () {
      try {
        const { data: menu } = await getMenuList()
        this.getSubMenuList(menu)
      } catch (err) {
        this.$message.error('加载菜单列表失败')
      }
    },
    // 获取二、三级菜单
    getSubMenuList (menu) {
      menu.forEach(element => {
        element.childs.forEach(item => {
          this.subMenuList.push(item)
        })
      })
    },
    // 添加角色
    addRole () {
      this.addDialogVisible = true
    },
    // 编辑角色权限
    editRole (rowInfo) {
      this.editDialogVisible = true
      this.role = rowInfo
    },
    editSuccess (data) {
      this.$store.dispatch('loaderRightList')
      this.flag = data
    },
    // 删除角色
    deleteRole (rowInfo) {
      this.$msgbox.confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          await deleteRoleRight(rowInfo.id)
        } catch (err) {
          this.$message.error('删除角色失败')
        }
        this.$message.success('删除角色成功')
        // 加载角色权限列表
        this.$store.dispatch('loaderRightList')
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style  lang='less' scoped>
.rights-container {
  .add-role {
    margin-bottom: 20px;
  }

  .right-list {
    a {
      text-decoration: none;
      margin-right: 15px;
      color: #4f99eb;
    }
    a:hover {
      text-decoration: underline;
    }
  }
}
</style>
